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L'élément <IMG> 
On utilise l'élément <IMG> pour placer les images. Deux attributs sont obligatoires : 


e L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers image doivent impérativement être aux formats GIF 
ou JPG. 

e L'attributalt pour indiquer un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes 
raisons, elle n'apparaît pas. 


<IMG src=lefrance.gif alt="Le France"> 
Le <STRONG>France</STRONG> a... 


-Le France a été construit en 1957. Pour vous 
donner une idée de sa puissance, un chiffre suffit : chacune des deux hélices qui servent de 
propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles marins à l'heure ou, pour parler 
terrien, plus de 46 km/h. 


Les attributs optionnels de l'élément <IMG> 
L'attribut align 


ll indique le mode d'alignement de l'image. Il y a 5 valeurs possibles : top, middle, bottom, left, right. Les trois premiers 
concernent l'alignement vertical par rapport à la ligne. 


Voilà un joli bateau qui entre dans l'estuaire.<br> 

Ici, il est aligné sur le haut 

<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=top>, 
puis au milieu 

<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=middle>, 
et enfin sur le bas de la ligne 

<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=bottom>. 


Voilà un joli bateau qui entre dans l'estuaire. 


lci, il est aligné sur le haut , puis au milieu , et enfin sur le bas de la ligne 


Les valeurs left et right permettent d'habiller une image avec le texte, en plaçant l'image respectivement à gauche et à droite. 


<IMG src=lefrance.gif alt="Le France" align=left> 
Le <STRONG>France</STRONG> a... 
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| plus de 46 km/h. 


Le France a été construit en 1957. Pour vous donner une idée 
de sa puissance, un chiffre suffit : chacune des deux hélices 
qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 
_ noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, 


<IMG src=lefrance.gif alt="Le France" align=right> 
Le <STRONG>France</STRONG> a... | EX | 


© | Le France a été construit en 1957. Pour vous donner une idée 
| de sa puissance, un chiffre suffit : chacune des deux hélices 
qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 ; 
noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, 
plus de 46 km/h. 


L'attribut border 


Permet de régler l'épaisseur du trait entourant l'image, en pixels. La valeur 0 signifie qu'il n'y a pas de bordure (c'est la valeur par 


défaut sauf dans le cas où l'image est dans un lien). 


<IMG src=lefrance.gif alt="Le France" pris Pere] 
Le D ci a. 


marins à l'heure ou, pour parler terrien, plus de 46 km/h. 


Le France a été construit en 1957. Pour vous donner une idée de sa 
puissance, un chiffre suffit : chacune des deux hélices qui servent de 
propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles 


Les attributs width et height 
lls permettent de déterminer la hauteur et la largeur de l'image, en pixels. 


I faut toujour éviter de les utiliser pour redimensionner l'image. 
Mieux vaut utiliser un logiciel de dessin pour modifier la taille de l'image source : 


e Essayer d'agrandir une image par ce moyen donne de mauvais résultats (voir à 
droite) 


e Réduire une image par ce biais n'altère pas la qualité de l'affichage. En revanche, 


dans ce cas, l'image téléchargée sur le réseau est trop grosse, ce qui fait perdre 
beaucoup de temps à l'utilisateur. 


Malgré tout, la mise à jour de ces attributs permet au navigateur d'afficher un 
cadre correctement dimensionné à la place de l'image, et du même coup 
l'affichage correct du reste de la page, pendant le temps de chargement de 
l'image elle-même, comme ci-dessous. 


Quelle image magnifique... (l'image a été volontairement 


retirée pour simuler 


l'apparence durant le chargement des images). 


Les attributs hspace et vspace 


Permettent de déterminer les espaces, en pixels, entre l'image et le texte autour (hspace horizontalement et vspace verticalement). 
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Les images cliquables 


Utiliser une image dans un lien 


L'utilisation d'une image comme étiquette dans un lien ne pose bien entendu aucun problème. Il suffit de placer un élément IMG dans 
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un élément A. Attention toutefois : par défaut les images cliquables ont une bordure de la couleur des liens. Pour la supprimer, il faut 
utiliser l'attribut border (en lui attribuant la valeur 0). 


<A href="exemples/lefrance .html'"><IMG src=lefranc .gif alt="Le France"></A> 
Cliquer sur la vignette pour aller voir une belle photo <STRONG>France</STRONG> (36ko) 


benak < 


ne Cliquer sur la vignette pour aller voir une belle photo (36ko) 


L'exemple précédent montre une façon courante de proposer une image volumineuse. On fabrique, avec un logiciel de dessin une 
copie de l'image, de toutes petites dimensions, et on l'utilise comme lien vers l'image originale (ou mieux, une page contenant cette 
image). Ainsi l'utilisateur est informé que s'il suit ce lien, il aura accès à une image de bonne qualité, mais que le temps de 
chargement risque d'être un peu long. 


Les cartes cliquables 


On appelle "carte cliquable" une image dans laquelle sont définis des zones associées à des liens. Selon l'endroit où l'on clique sur la 
carte, un lien différent est activé. 


ll existe théoriquement deux techniques pour construire une telle image. Dans la première, les coordonées du point sont envoyées au 
serveur qui renvoie au navigateur l'adresse du lien, celui-ci est alors activé. Cette technique est plus difficile à mettre en oeuvre que la 
suivante, et implique une requête supplémentaire (et donc une attente plus longue). De plus elle est devenue obsolète, et est 
incompatible avec la nécessité d'accessibilité des pages. 


Nous allons donc étudier la seconde technique, qui permet de spécifier dans la page HTML elle même les différentes zones de la 
carte. Cette carte sera alors interprétée localement, c'est-à-dire que le logiciel de navigation déterminera lui-même, en fonction de la 
position du clic sur l'image, du lien à activer. Elle est plus rapide et n'empêche pas l'accessibilité du site. 


On place l'image comme d'habitude avec l'élément IMG, tous les attributs ci-dessus sont autorisés. On ajoute un attribut map qui 
permet d'indiquer le nom de la carte qui doit être utilisée. 


[KME srcinagensp.gif alt="Carte cliquable" usemap-frep> ] 


Cette carte est définie avec l'élément MAP. Elle permet de définir les différentes zones avec des éléments AREA. 


<IMG src=imagemap.gif alt="Carte cliquable” usemap=#map> 


<MAP name=map> Cou rs H 
<AREA href="index.html"... 


<AREA href="intro.html"... 
<AREA href="bases.html"... 
<AREA href="liens.html"... 


Intro B Bases 


VYVVWV 


</MAP> 


Chaque élément AREA définit une zone. || doit comporter différents attributs : 


l'attribut hre £ 
pour indiquer l'adresse du lien correspondant à cette zone 


l'attribut shape 
pour indiquer la forme de la zone. 3 formes sont possibles : 


e rectpour un rectangle 
e circle pour un disque 
e poly pour un polygone 


De plus, la valeur default permet de définir un lien qui sera activé si l'on clique en dehors des zones définies. L'élément AREA 
contenant cette valeur doit être le dernier de la liste. 


l'attribut coords 
pour indiquer les coordonées des différentes formes : 


e rect: un rectangle est défini par son coin supérieur gauche (x1,y1) et son coin inférieur droit (x2,y2) soit 
coords="x1,y1,x2,y2" 

e circle un disque est défini par son centre (x,y) et son rayon (r) coords="x,y,r" 

e poly un polygone est défini par la liste de ses sommets (x1,y1), (x2,y2), (x3,y3)... (maximum 100) soit 
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coords="x1,y1,x2,y2,x3,y3..." 


l'attribut alt 
pour indiquer un texte alternatif que les navigateurs textuels pourront utiliser. 


Les coordonnées sont données en pixels et ont pour origine le coin supérieur gauche de l'image. 


En supplément, il est possible d'indiquer une zone qui ne doit pas réagir (dans le cas de l'utilisation de la valeur default de un 
attribut shape. Pour ce faire, on remplace l'attributhref=... par l'attribut nohref 


Voici l'exemple précédent complet : 


<IMG src=imagemap.gif alt="Carte cliquable" usemap=#map> 


<MAP name=map> 

<AREA href="index.html'" shape="rect" coords="10,10,280,40" alt="Cours HTML"> 

<AREA href="intro.html" shape="rect" coords="10,50,70,110" alt="Introduction"> 

<AREA href="bases.html'" shape="circle" coords="110,80,30" alt="Bases"> 

<AREA href='"textes/liens.html" shape="poly" coords="150,70,180,70,180,50, 
210,80,180,110,180,90,150,90" alt="Liens"> 

<AREA nohref shape="rect" coords="220,50,280,110" alt="Rien"> 

<AREA href="textes/refs.html" shape="default" alt="Références"> 

</MAP> 
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Dans le chapitre suivant nous allons aborder la forme avec les feuilles de style. 


Dominique Archambault, 1998 
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